<template>
	<div class="tmpl">
		<nav-bar :title="title" />

		<div class="news-title">
			<p>{{newsDetail.title}}</p>
			<div>
				<span>22次点击</span>
				<span>分类:民生经济</span>
				<span>添加时间:{{newsDetail.passtime | convertTime('YYYY-MM-DD')}}</span>
			</div>
		</div>
		<!--v-html在vue渲染完毕后才加载出新闻内容，在当前style模块内处理图片超出屏幕的问题时无效的，
		可以到全局的global.css中处理，或在没有scoped修饰style标签时处理 -->
		<div class="news-content" v-html="newsDetail.path">
			<!-- <v-html-panel :url.asyc="newsDetail.path"></v-html-panel> -->
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				title:'', // 变化的标题
				newsDetail:{},//新闻详情
			}
		},
		created() {
			//获取路由查询字符串参数id
			let id = this.$route.query.id;

			this.$axios.get('https://api.apiopen.top/getWangYiNews').then( res => {
				this.newsDetail = res.data.result[id];
			})
			.catch(err => console.log('新闻详情异常',err) );
		},
		// 路由确认前，组件渲染前的守卫函数
		beforeRouteEnter(to, from ,next) {
			console.log(to);
			console.log(from)
			// 1. 判断from 万一from的name为空，说明是粘贴地址栏
			//   1.1 继续判断，根据to来设置title
			// 2. 如果from 是新闻列表，就给tile新闻详情
			// 3. 如果from 是商品详情，就给title商品图文介绍
			let title = '';
			if(from.name == null) {
				
				if(to.name === 'news.detail') {
					title = '新闻详情';
				} else if (to.name === 'photo.info') {
					title = '商品图文介绍';
				}
			} else if(from.name === 'news.list') {
				title = '新闻详情';
			} else if(from.name === 'goods.detail'){
				title = '商品图文介绍'
			}
			// 最终都放行，大不了赋值一个title为空字符串
			next(vm => {
				vm.title = title; // vm 就是未来组件对象的名字
			});
			
		}
	}
</script>
<style scoped>
	.news-title p {
		color: #0a87f8;
		font-size: 20px;
		font-weight: build; 
	}
	.news-title span {
		margin-right: 14px;
	}
	,news-title {
		margin-top: 0px;
		border-bottom: 1px solid rgba(0,0,0,0.2);
	}
	/*主题文章的左右间距*/
	.news-content {
		padding: 10 5;
	}
</style>